<template>
<view>
	<!-- index页 -->
	<view :class="{dpn: isShowSearch}">
		
			<!-- 导航栏 -->
			<uni-nav-bar fixed="true">
				<block slot="left">
					<image class="top-img" src="../../static/image/search/6.png" mode="widthFix"></image>
				</block>
				<view class="top-search flex-box" @click="openSearch()">
					<image class="search-icon" src="../../static/image/search/2.png" mode="widthFix"></image>
					周杰伦<font class="iconfont">&#xe638;</font>
				</view>
				<block slot="right">
					<image class="top-img" src="../../static/image/mine/r.png" mode="widthFix"></image>
				</block>
			</uni-nav-bar>
		
	<view class="page-content">
		<!-- :down="downOption" :up="upOption" @down="downCallback" @up="upCallback" -->
		<mescroll-uni>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper :indicator-dots="true" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#ff372b"
				:autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in banners" :key="index">
					<view class="item">
						<image :src="item.imageUrl" class="img"></image>
						<view class="tag">
							{{item.typeTitle}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 入口导航 -->
		<view class="main-bar flex-box">
			  <view v-for="(item,index) in contentBar" :key="index" class="flex-item">
			  	<image :src="`../../static/image/index/t_${index+1}.png`" class="img"></image>
			  	<view class="">
			  		{{item.name}}
			  	</view>
			  </view>
		</view>
		
		<!-- 推荐歌单 -->
		<!-- <view class="song-list">
			<view class="tit-bar">
				推荐歌单
				<view class="more fr">
					歌单广场
				</view>
			</view>
				
			<scroll-view scroll-x=true class="scroll-view">
				  <view class="item" v-for="item in songs" :key="item.id">
				  	<image :src="item.picUrl" class="img"></image>
					<view class="desc ellipsis">{{item.name}}</view>
				  	<view class="count">{{item.playCount}}</view>
				  </view>
			</scroll-view>
		</view> -->
		<song :songs="songs"></song>
		
		<!-- 新碟新歌 -->
		<view class="song-list">
			<view class="switch-line flex-box">
				<view class="flex-box">
					<view class="switch-item"  :class="{on:flag}" @click="changeNewSongs">新碟</view>
					<view class="switch-item" :class="{on:!flag}" @click="changeNewSongs"> 新歌</view>
				</view>
				<view v-if="flag" class="more">更多新碟</view>
				<view v-else class="more">更多新歌</view>
			</view>
			
			<scroll-view scroll-x="true" class="scroll-view">
				<view class="item" v-for="item in albums" :key="item.id">
					<image :src="item.picUrl" mode="" class="img"></image>
					<view class="desc ellipsis">
						{{item.name}}
					</view>
					<view class="desc ellipsis c9">
						{{item.artist.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 精选视频 -->
		<view class="video-list song-list">
			<view class="tit-bar">
				精选视频
				<view class="more fr">
					更多
				</view>
			</view>
			
			<view class="video-item" v-for="(item,index) in video" :key="index">
				<image :src="item.picUrl" mode="" class="img"></image>
				<view class="desc ellipsis">
					{{item.name}}
				</view>
			</view>
			
		</view>
		</mescroll-uni>
	</view>
			
	</view>

	<!-- 搜索页 -->
	<search v-show="isShowSearch" ref="search"></search>
		
</view>
</template>

<script>
	import song from "@/components/song.vue"
	import search from "@/components/search.vue"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniNavBar from "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				banners: [],
				contentBar:[{
					name:"每日推荐"
				  },{
					name:"歌单"
				  },{
					name:"排行榜"
				  },{
					name:"电台"
				  },{
					name:"直播"
				}],
				songs:[],
				albums:[],
				flag:true,
				video:[],
				isShowSearch:false,
				
			}
		},
		components:{
			song,search,uniNavBar
		},
		onLoad() {
			this.getBanner();
			this.getSongs();
			this.getNewSongs();
			this.getVideo()
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},2000)
		},
		methods: {
			getBanner() {
				this.$API.getBanners().then(res => this.banners = res.data.banners)
			},
			
			getSongs(){
				this.$API.getSongs({limit:3}).then(res=>{
					this.songs=res.data.result.map(item=>{
						if(item.playCount>10000){
							item.playCount=parseInt(item.playCount/10000)+"w"
						};
						return item
					});
				})
			},
			
			getNewSongs(){
				this.$API.getNewSongs().then(res=>{
					if(this.flag==true){
						this.albums=res.data.albums.splice(0,6);
					}else{
						this.albums=res.data.albums.splice(6,6);
					}
				})
			},
			
			changeNewSongs(){
				this.flag=!this.flag;
				this.getNewSongs()
			},
			
			getVideo(){
				// this.$API.getVideo({id:32154}).then(res=>{
				// })
				this.$API.getSongs().then(res=>this.video=res.data.result.splice(20,5))
			},
			
			openSearch(){
				this.isShowSearch=true;
				this.$refs.search.getHotList();
				
				
			},
			
			closeSearch(){
				
			}
			
			
			
			
		}






	}
</script>

<style lang="scss">
page {
	color: #1a1a1a;
	font-size: 24rpx;
}
.dpn{
	display: none;
}
.top-img {
	width: 50rpx;
	height: 50rpx;
	margin-top: 10rpx;
}
.top-search {
	width: 460rpx;
	/* #ifdef MP-WEIXIN */
	width: 460rpx;
	margin-left:-60rpx;
	/* #endif */
	height: 72rpx;
	margin-right: 24rpx;
	border-radius: 72rpx;
	color: #c6c6c6;
	background: #f7f7f7;
	align-items: center;
	justify-content: center;
	.search-icon {
		width: 28rpx;
		height: 29rpx;
		margin-right: 12rpx;
	}
}
.page-content {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0px;
	/* #ifdef H5 || MP-WEIXIN */
	top: 44px;
	/* #endif */
}
.banner {
	width: 100%;
	height: 268rpx;
	margin: 30rpx auto 44rpx;
	.swiper {
		height: 268rpx;
	}
	.item {
		position: relative;
		display: block;
		width: 686rpx;
		height: 268rpx;
		margin: 0 auto;
		border-radius: 14rpx;
		overflow: hidden;
	}
	.img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.tag {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 34rpx;
		padding: 0 14rpx;
		line-height: 34rpx;
		color: #fff;
		background: #43a5f0;
		z-index: 10;
		border-top-left-radius: 14rpx;
	}
}

.main-bar {
	padding-bottom: 22rpx;
	text-align: center;
	line-height: 70rpx;
	color: #666;
	border-bottom: 1rpx solid #e6e6e6;
	.img {
		display: block;
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}
	.flex-item {
		position: relative;
		.date {
			position: absolute;
			left: 50%;
			top: 40rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #ff392d;
			transform: translateX(-50%) scale(0.8);
		}
	}
}

.song-list {
	padding-left: 32rpx;
	.tit-bar {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}

	.more {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 32rpx;
		color: #333;
		font-weight: 400;
		font-size: 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50rpx;
	}
	.switch-line {
		justify-content: space-between;
		color: #999;
		.flex-box {
			line-height: 110rpx;
			width: 300rpx;
		}
		.switch-item {
			font-weight: 600;
			&:first-child {
				width: 80rpx;
			}
			&:last-child {
				padding-left: 22rpx;
			}
			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}

	.item {
		position: relative;
		display: inline-block;
		width: 218rpx;
		padding-bottom: 16rpx;
		margin-right: 16rpx;
		line-height: 34rpx;
		&:before {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 40rpx;
			z-index: 2;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
		}
		&.video {
			width: 450rpx;
		}
		.img {
			display: block;
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}
	.count {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 25rpx;
		line-height: 34rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 10;
		background: url()
			no-repeat;
		background-size: 25rpx 25rpx;
		transform: scale(0.8);
	}
}
.video-list {
	padding-left: 0;
	.tit-bar {
		padding-left: 32rpx;
	}
	.video-item {
		width: 686rpx;
		height: 490rpx;
		margin: 0 auto;
		background: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
	}
	.img {
		display: block;
		width: 686rpx;
		height: 390rpx;
		background: #eee;
	}
	.desc {
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 100rpx;
	}
}

/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
/* #ifdef MP-WEIXIN */
.banner {
	margin-top: 60rpx;
}
/* #endif */
</style>